组件库项目闭环：测试、发包、安装打包测试
概述
本节完成组件库项目的完整闭环：使用 nrm 切换到 npm 官方源、发布组件库到 npm、在实际项目中安装线上包并验证功能正常。
完整闭环流程
配置 package.json → 本地验证 → npm publish → 线上搜索 → 安装测试 → 打包验证
text
1. NPM 源管理
使用 nrm 切换 Registry
# 全局安装 nrm（NPM Registry 管理工具）
npm install -g nrm
# 查看所有可用源
nrm ls
# 切换到 npm 官方源（发布必须）
nrm use npm
# 切换到淘宝镜像（开发时加速下载）
nrm use taobao
bash
| 命令 | 说明 |
|---|---|
nrm ls | 列出所有可用的 registry 源 |
nrm use npm | 切换到 npm 官方源 |
nrm use taobao | 切换到淘宝镜像源 |
nrm test | 测试各源响应速度 |
2. 发布前配置
package.json 关键字段
{
"name": "@vp/admin-components",
"version": "1.0.0",
"author": "brian <admin@example.com>",
"description": "Admin template component library based on Element Plus",
"main": "dist/index.cjs",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.cjs",
"types": "./dist/index.d.ts"
}
},
"files": ["dist"],
"publishConfig": {
"access": "public"
},
"peerDependencies": {
"vue": "^3.3.0",
"element-plus": "^2.4.0"
}
}
json
| 字段 | 说明 |
|---|---|
name | 包名，scoped 包需 @scope/name 格式 |
main / module | CommonJS / ESM 入口 |
types | TypeScript 类型声明入口 |
exports | 现代打包工具使用的导出映射 |
files | 发布时包含的文件/目录 |
peerDependencies | 宿主项目需安装的依赖 |
3. 发布流程
# 1. 确保切换到 npm 源
nrm use npm
# 2. 确保已登录 npm
npm whoami
# 未登录时执行：
npm login
# 3. 构建组件库
pnpm run build
# 4. 提交代码
git add .
git commit -m "feat: v1.0.0 release"
# 5. 发布
npm publish --access public
# 如果是 scoped 包首次发布，需要指定 public
npm publish --access public
bash
4. 安装测试
# 回到实际项目（admin-vue3）
cd admin-vue3
# 删除旧的 node_modules（清除软链接）
rm -rf node_modules
# 重新安装依赖（指定版本号）
pnpm install
# 验证包是否正确安装
ls node_modules/@vp/admin-components
bash
版本检查与依赖更新
# 全局安装 npm-check-updates
npm install -g npm-check-updates
# 检查可更新的依赖
ncu
# 更新 package.json 中的依赖版本
ncu -u
# 重新安装
pnpm install
bash
5. 打包验证
# 启动开发服务器验证组件功能
pnpm dev
# 执行生产构建
pnpm build
bash
验证清单：
| 检查项 | 验证方法 |
|---|---|
| 组件渲染 | 页面正常显示，无控制台报错 |
| 类型支持 | IDE 中组件 Props 有类型提示 |
| 样式正常 | 暗黑模式、响应式无异常 |
| 构建通过 | pnpm build 无错误 |
| Tree-shaking | 打包体积合理，未引入未使用的组件 |
6. 版本更新流程
# 更新补丁版本 1.0.0 → 1.0.1
npm version patch
# 更新次版本 1.0.0 → 1.1.0
npm version minor
# 更新主版本 1.0.0 → 2.0.0
npm version major
# 发布新版本
npm publish
bash
小结
- 使用
nrm管理 npm registry 源，发布时必须切换到官方源 package.json的exports字段确保 ESM/CJS 双格式兼容- 发布后在实际项目中安装线上包进行完整验证
- 组件库开发闭环：开发 → 打包 → 发布 → 安装 → 测试 → 构建
↑